<template>
  <div class="dropDown-container">
    <el-tabs
      tab-position="left"
      style="height: 350px"
      @tab-click="handleClickBrand"
    >
      <el-tab-pane
        v-for="(brand, i) in brands"
        :key="i + 1"
        :label="brand.brandName"
      >
        <ul class="right-pane">
          <li
            v-for="(product, i) in products"
            :key="i"
            @click="handleClickProduct(product)"
          >
            {{ product.name }}
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getBrand, getProductsByBrandID } from "@/api/getProducts";
export default {
  props: ["index"],
  data() {
    return {
      brands: [],
      currentBrandId: 1,
      products: [],
    };
  },
  methods: {
    handleClickBrand(i) {
      this.currentBrandId = Number(i.index) + 1;
      getProductsByBrandID(this.currentBrandId).then((res) => {
        this.products = res.data.data;
      });
    },
    handleClickProduct(product) {
      this.$emit("currentProduct", product, this.$props.index);
    },
  },
  async mounted() {
    /* 请求品牌信息 */
    await getBrand().then(({ data }) => {
      this.brands = data.data;
    });
    getProductsByBrandID(this.currentBrandId).then((res) => {
      //   console.log("初始化", res.data.data);
      this.products = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
/* Webkit browsers */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: rgb(250, 250, 250);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.dropDown-container {
  width: 300px;
}
.right-pane {
  height: 350px;
  overflow-y: scroll;
  font-size: 10px;
  li {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding: 0 5px;
  }
  :hover {
    background-color: #ecf5ff;
    color: #6fb6ff;
  }
}
</style>